<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../style.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../../print.css" type="text/css" media="print">
<meta content="PathFollower,com.greensock.motionPaths.PathFollower,autoRotate,path,rotationOffset,target,progress,rawProgress" name="keywords">
<title>com.greensock.motionPaths.PathFollower</title>
</head>
<body>
<script type="text/javascript" language="javascript" src="../../../asdoc.js"></script><script type="text/javascript" language="javascript" src="../../../cookies.js"></script><script type="text/javascript" language="javascript">
<!--
				asdocTitle = 'PathFollower - API Documentation';
				var baseRef = '../../../';
				window.onload = configPage;
			--></script>
<table style="display:none" id="titleTable" cellspacing="0" cellpadding="0" class="titleTable">
<tr>
<td align="left" class="titleTableTitle">API Documentation</td><td align="right" class="titleTableTopNav"><a onclick="loadClassListFrame('../../../all-classes.html')" href="../../../package-summary.html">All&nbsp;Packages</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../../all-classes.html')" href="../../../class-summary.html">All&nbsp;Classes</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../../index-list.html')" href="../../../all-index-A.html">Index</a>&nbsp;|&nbsp;<a href="../../../index.html?com/greensock/motionPaths/PathFollower.html&amp;com/greensock/motionPaths/class-list.html" id="framesLink1">Frames</a><a onclick="parent.location=document.location" href="" style="display:none" id="noFramesLink1">No&nbsp;Frames</a></td><td rowspan="3" align="right" class="titleTableLogo"><img alt="Adobe Logo" title="Adobe Logo" class="logoImage" src="../../../images/logo.jpg"></td>
</tr>
<tr class="titleTableRow2">
<td align="left" id="subTitle" class="titleTableSubTitle">Class&nbsp;PathFollower</td><td align="right" id="subNav" class="titleTableSubNav"><a href="#propertySummary">Properties</a>&nbsp;| <a href="#methodSummary">Methods</a></td>
</tr>
<tr class="titleTableRow3">
<td colspan="2">&nbsp;</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
<!--
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("Class PathFollower"); titleBar_setSubNav(false,true,false,false,false,false,true,false,false,false,false,false,false,false);}
--></script>
<div class="MainContent">
<table cellspacing="0" cellpadding="0" class="classHeaderTable">
<tr>
<td class="classHeaderTableLabel">Package</td><td><a onclick="javascript:loadClassListFrame('class-list.html')" href="package-detail.html">com.greensock.motionPaths</a></td>
</tr>
<tr>
<td class="classHeaderTableLabel">Class</td><td class="classSignature">public class PathFollower</td>
</tr>
</table>
<p></p>
 A PathFollower is used to associate a particular target object (like a MovieClip, Point, Sprite, etc.) 
 with a MotionPath and it offers a tweenable <code>progress</code> property that manages positioning
 the target on the path accordingly. The <code>progress</code> property is a value between
 0 and 1 where 0 is at the beginning of the path, 0.5 is in the middle, and 1 is at the end. 
 When the follower's <code>autoRotate</code> property is <code>true</code>, the target will be
 rotated in relation to the path that it is following. <br /><br />
 
 <p></p>
<br>
<span class="label">Example</span>
<br>Example AS3 code:<div class='listing'><pre>
import com.greensock.*;
import com.greensock.motionPaths.*;

//create a circle motion path at coordinates x:150, y:150 with a radius of 100
var circle:Circle2D = new Circle2D(150, 150, 100);

//make the MovieClip "mc" follow the circle and start at a position of 90 degrees (this returns a PathFollower instance)
var follower:PathFollower = circle.addFollower(mc, circle.angleToProgress(90), true);

//tween the follower clockwise along the path to 315 degrees
TweenLite.to(follower, 2, {progress:circle.followerTween(follower, 315, Direction.CLOCKWISE)});

//tween the follower counter-clockwise to 200 degrees and add an extra revolution
TweenLite.to(follower, 2, {progress:circle.followerTween(follower, 200, Direction.COUNTER_CLOCKWISE, 1)});
</pre></div>
 
 <b>NOTES</b><br />
 <ul>
   <li>All followers are automatically updated when you alter the MotionPath that they're following.</li>
   <li>To tween all followers along the path at once, simply tween the MotionPath's <code>progress</code> 
    property which will provide better performance than tweening each follower independently.</li>
 </ul>
 
 <b>Copyright 2011, GreenSock. All rights reserved.</b> This work is subject to the terms in <a href="http://www.greensock.com/terms_of_use.html">http://www.greensock.com/terms_of_use.html</a> or for corporate Club GreenSock members, the software agreement that was issued with the corporate membership.
 
 <p></p>
<br>
<hr>
</div>
<a name="propertySummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Properties</div>
<table id="summaryTableProperty" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#autoRotate">autoRotate</a> : Boolean<div class="summaryTableDescription"> When <code>autoRotate</code> is <code>true</code>, the follower will automatically be rotated so that it is oriented to the angle of the path that it is following.</div>
</td><td class="summaryTableOwnerCol">PathFollower</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#path">path</a> : <a href="../motionPaths/MotionPath.html">MotionPath</a>
<div class="summaryTableDescription"> The MotionPath instance that this PathFollower should follow </div>
</td><td class="summaryTableOwnerCol">PathFollower</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#progress">progress</a> : Number<div class="summaryTableDescription"> 
   A value between 0 and 1 that indicates the follower's position along the motion path.</div>
</td><td class="summaryTableOwnerCol">PathFollower</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#rawProgress">rawProgress</a> : Number<div class="summaryTableDescription"> 
   Identical to <code>progress</code> except that the value doesn't get re-interpolated between 0 and 1.</div>
</td><td class="summaryTableOwnerCol">PathFollower</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#rotationOffset">rotationOffset</a> : Number<div class="summaryTableDescription"> When <code>autoRotate</code> is <code>true</code>, this value will always be added to the resulting <code>rotation</code> of the target.</div>
</td><td class="summaryTableOwnerCol">PathFollower</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#target">target</a> : Object<div class="summaryTableDescription"> The target object associated with the PathFollower (like a Sprite, MovieClip, Point, etc.).</div>
</td><td class="summaryTableOwnerCol">PathFollower</td>
</tr>
</table>
</div>
<a name="methodSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Methods</div>
<table id="summaryTableMethod" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#PathFollower()">PathFollower</a>(target:Object, autoRotate:Boolean = false, rotationOffset:Number = 0)</div>
<div class="summaryTableDescription">
   Constructor
   
   </div>
</td><td class="summaryTableOwnerCol">PathFollower</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
<!--
showHideInherited();
--></script>
<div class="MainContent">
<a name="propertyDetail"></a>
<div class="detailSectionHeader">Property detail</div>
<a name="autoRotate"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">autoRotate</td><td class="detailHeaderType">property</td>
</tr>
</table>
<div class="detailBody">
<code>public var autoRotate:Boolean</code><p> When <code>autoRotate</code> is <code>true</code>, the follower will automatically be rotated so that it is oriented to the angle of the path that it is following. To offset this value (like to always add 90 degrees for example), use the <code>rotationOffset</code> property. </p></div>
<a name="path"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">path</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>public var path:<a href="../motionPaths/MotionPath.html">MotionPath</a></code><p> The MotionPath instance that this PathFollower should follow </p></div>
<a name="progress"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">progress</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>progress:Number</code>&nbsp;&nbsp;[read-write]<p> 
   A value between 0 and 1 that indicates the follower's position along the motion path. For example,
   to place the object on the path at the halfway point, you would set its <code>progress</code> to 0.5.
   You can tween to values that are greater than 1 or less than 0 but the values are simply wrapped. 
   So, for example, setting <code>progress</code> to 1.2 is the same as setting it to 0.2 and -0.2 is the 
   same as 0.8. If your goal is to tween the PathFollower around a Circle2D twice completely, you could just 
   add 2 to the <code>progress</code> value or use a relative value in the tween, like: <br /><br /><code>
   
   TweenLite.to(myFollower, 5, {progress:"2"}); //or myFollower.progress + 2</code><br /><br />
   
   <code>progress</code> is identical to <code>rawProgress</code> except that <code>rawProgress</code> 
   does not get re-interpolated between 0 and 1. For example, if <code>rawProgress</code> 
   is set to -3.4, <code>progress</code> would be 0.6. <code>rawProgress</code> can be useful if 
   you need to find out how many times the PathFollower has wrapped.
   
   Also note that if you set <code>progress</code> to any value <i>outside</i> of the 0-1 range, 
   <code>rawProgress</code> will be set to that exact value. If <code>progress</code> is
   set to a value <i>within</i> the typical 0-1 range, it will only affect the decimal value of 
   <code>rawProgress</code>. For example, if <code>rawProgress</code> is 3.4 and then you 
   set <code>progress</code> to 0.1, <code>rawProgress</code> will end up at 3.1 (notice
   the "3" integer was kept). But if <code>progress</code> was instead set to 5.1, since
   it exceeds the 0-1 range, <code>rawProgress</code> would become 5.1. This behavior was 
   adopted in order to deal most effectively with wrapping situations. For example, if 
   <code>rawProgress</code> was tweened to 3.4 and then later you wanted to fine-tune
   where things were positioned by tweening <code>progress</code> to 0.8, it still may be
   important to be able to determine how many loops/wraps occurred, so <code>rawProgress</code>
   should be 3.8, not reset to 0.8. Feel free to use <code>rawProgress</code> exclusively if you 
   prefer to avoid any of the re-interpolation that occurs with <code>progress</code>.
   
   </p><span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function get progress():Number</code>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function set progress(value:Number):void</code>
<br>
<p>
<span class="label">See also</span>
</p>
<div class="seeAlso">
<a href="../motionPaths/PathFollower.html#rawProgress" target="">rawProgress</a>
</div>
</div>
<a name="rawProgress"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">rawProgress</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>rawProgress:Number</code>&nbsp;&nbsp;[read-write]<p> 
   Identical to <code>progress</code> except that the value doesn't get re-interpolated between 0 and 1.
   <code>rawProgress</code> (and <code>progress</code>) indicates the follower's position along the motion path. 
   For example, to place the object on the path at the halfway point, you could set its <code>rawProgress</code> 
   to 0.5. You can tween to values that are greater than 1 or less than 0. For example, setting <code>rawProgress</code> 
   to 1.2 also sets <code>progress</code> to 0.2 and setting <code>rawProgress</code> to -0.2 is the 
   same as setting <code>progress</code> to 0.8. If your goal is to tween the PathFollower around a Circle2D twice 
   completely, you could just add 2 to the <code>rawProgress</code> value or use a relative value in the tween, like: <br /><br /><code>
   
   TweenLite.to(myFollower, 5, {rawProgress:"2"}); //or myFollower.rawProgress + 2
   
   </code><br /><br />
   
   Since <code>rawProgress</code> doesn't re-interpolate values to always fitting between 0 and 1, it
   can be useful if you need to find out how many times the PathFollower has wrapped.
   
   </p><span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function get rawProgress():Number</code>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function set rawProgress(value:Number):void</code>
<br>
<p>
<span class="label">See also</span>
</p>
<div class="seeAlso">
<a href="../motionPaths/PathFollower.html#progress" target="">progress</a>
</div>
</div>
<a name="rotationOffset"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">rotationOffset</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>public var rotationOffset:Number</code><p> When <code>autoRotate</code> is <code>true</code>, this value will always be added to the resulting <code>rotation</code> of the target. </p></div>
<a name="target"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">target</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>public var target:Object</code><p> The target object associated with the PathFollower (like a Sprite, MovieClip, Point, etc.). The object must have x and y properties. </p></div>
<a name="constructorDetail"></a>
<div class="detailSectionHeader">Constructor detail</div>
<a name="PathFollower()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">PathFollower</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">constructor</td>
</tr>
</table>
<div class="detailBody">
<code>public function PathFollower(target:Object, autoRotate:Boolean = false, rotationOffset:Number = 0)</code><p>
   Constructor
   
   </p><span class="label">Parameters</span>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20px"></td><td><code><span class="label">target</span>:Object</code> &mdash; The target object associated with the PathFollower (like a Sprite, MovieClip, Point, etc.). The object must have x and y properties. 
   </td>
</tr>
<tr>
<td class="paramSpacer">&nbsp;</td>
</tr>
<tr>
<td width="20px"></td><td><code><span class="label">autoRotate</span>:Boolean</code> (default = <code>false</code>)<code></code> &mdash; When <code>autoRotate</code> is <code>true</code>, the follower will automatically be rotated so that it is oriented to the angle of the path that it is following. To offset this value (like to always add 90 degrees for example), use the <code>rotationOffset</code> property.
   </td>
</tr>
<tr>
<td class="paramSpacer">&nbsp;</td>
</tr>
<tr>
<td width="20px"></td><td><code><span class="label">rotationOffset</span>:Number</code> (default = <code>0</code>)<code></code> &mdash; When <code>autoRotate</code> is <code>true</code>, this value will always be added to the resulting <code>rotation</code> of the target.
   </td>
</tr>
</table>
</div>
<br>
<br>
<hr>
<br>
<p></p>
<center class="copyright"> 
</center>
</div>
</body>
</html>
<!-- -->
